<html>
<head>
<script type='text/javascript' src='openlayers/OpenLayers.js'></script>
<script type='text/javascript' src='http://www.openlayers.org/api/OpenLayers.js'></script>
<script type='text/javascript' src="proj4js/lib/proj4js-combined.js"></script>
<script type='text/javascript' src='http://www.openstreetmap.org/openlayers/OpenStreetMap.js'></script>
<script type='text/javascript' src='http://www.free-map.org.uk/javascript/ezol.js'></script>
<script type='text/javascript'>               

		
                         
    OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {               
	                defaultHandlerOptions: {
	                    'single': true,
	                    'double': false,
	                    'pixelTolerance': 0,
	                    'stopSingle': false,
	                    'stopDouble': false
	                },

	                initialize: function(options) {
	                    this.handlerOptions = OpenLayers.Util.extend(
	                        {}, this.defaultHandlerOptions
	                    );
	                    OpenLayers.Control.prototype.initialize.apply(
	                        this, arguments
	                    ); 
	                    this.handler = new OpenLayers.Handler.Click(
	                        this, {
	                            'click': this.onClick
	                        }, this.handlerOptions
	                    );
	                }, 
	                            
              onClick: function(e) {
                
    						var output1 = document.getElementById(key + "Output1");
    						var output2 = document.getElementById(key + "Output2");	
                        
    						var xy = map.getLonLatFromViewPortPx(e.xy);
    								
    						var lonlat = xy.transform(map.projection, map.displayProjection);
    								
    						var Longitude = lonlat.lon;
    						var Latitude = lonlat.lat;
    		                                
    						output1.value = "";
    						output2.value = "";
    		
    						output1.value = output1.value + Longitude;
    						output2.value = output2.value + Latitude;
    										
                var popup;
                var lonLat = new OpenLayers.LonLat(output1.value, output2.value).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
                var size = new OpenLayers.Size(25,25);
                var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
                var icon = new OpenLayers.Icon('ako.jpg',size,offset);
   
                            /**  if (popup == null) {
                             var feature = new OpenLayers.Feature(new OpenLayers.Layer.OSM(), lonLat);
                              popup = feature.createPopup(true);
                              popup.setContentHTML("<div style='color: #fff'>Hello! I'm your awesome popup! I love you!</div>");
                              popup.setBackgroundColor('black');
                             // popup.setOpacity(0.5);
                               
                              } else {
                                    popup.toggle(); 
                                  }           **/
                           
                // add markers 
                layerMarker = new OpenLayers.Layer.Markers("Markers");
                map.addLayer(layerMarker);
                layerMarker.addMarker(new OpenLayers.Marker(lonLat,icon));
                //layerMarker.map.addPopup(popup);
                //alert("Hello there! I'm your alert box! I love you!");
                  
              function mousedown(evt) {
               if (popup == null) {
                   feature = new OpenLayers.Feature(new OpenLayers.Layer.OSM(),lonLat);
                   popup = feature.createPopup(true);
                   popup.setContentHTML("<div style='color: #fff'>Hello! I'm the awesome popup! I'm working! <br> I love you! </div>");
                   popup.setBackgroundColor('black');
                   popup.setOpacity(1.0);
                   layerMarker.map.addPopup(popup);
                     } else {
                         
                         popup.toggle();
                        }
                   }
                    
                    layerMarker.events.register('mousedown', layerMarker, mousedown);
		
                  }
                                  
                });
                      						
                 

  var map, controls;
	var key = "single";       	 
	
               
  function init()
	{
	
                
		map = new OpenLayers.Map("mapdiv", {
			controls:[
				new OpenLayers.Control.Navigation(),
				new OpenLayers.Control.PanZoomBar(),
				new OpenLayers.Control.LayerSwitcher(),
				new OpenLayers.Control.Attribution()],
			numZoomLevels: 14,
			units: 'mi',
			projection: new OpenLayers.Projection("EPSG:900913"),
			displayProjection: new OpenLayers.Projection("EPSG:4326")
		});
		
		map.addLayer(new OpenLayers.Layer.OSM());
		
		//Set start centerpoint and zoom    
		var lonLat = new OpenLayers.LonLat(121.047, 14.390).transform(new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());
		var zoom=14;
		map.setCenter (lonLat, zoom);  
	
    /*map.events.register("click", map, clickHandler);
		map.events.register("dblclick", map, onClick);*/
		
    
		
		var click = new OpenLayers.Control.Click();
	  map.addControl(click);
		click.activate();
		
		
		var output1 = document.getElementById(key + "Output1");
        output1.value = "";
		var output2 = document.getElementById(key + "Output2"); 
        output2.value = "";
	  
    

	}
           
</script>
</head>
<body onload="init()">     
 
<div id="mapdiv"></div>
	<div id="east">
	 <form name="form" method="post" action="testSuccess.php">
    Longitude:<input type="text" id="singleOutput1" name="output1"> Latitude:<input type="text" id="singleOutput2" name="output2">
    Points of Interest:<select name="poi">
					<option value="Hospital">Hospital</option>
					<option value="Restaurant">Restaurant</option>
					<option value="Evacuation Center">Evacuation Center</option>
					<option value="Clinic">Clinic</option>
					<option value="Fire">Fire Department</option>
    <input type="submit" value="Submit" name="testSubmit">
	</div>
</body>
</html>	